<template>
  <div>
    <div class="debgcolor debody clearfix">
      <div class="hr-10"></div>
      <div class="w">
        <div class="breadcrumb-area fcn">
          <a href="javascript:;">手机通讯</a>&nbsp;&gt;&nbsp;<a
            href="javascript:;"
            >手机</a
          >&nbsp;&gt;&nbsp;<a href="javascript:;">手机</a>&nbsp;&gt;&nbsp;<a
            href="javascript:;"
            >{{ productInfo.brand }}</a
          >&nbsp;&gt;&nbsp;
          <span id="bread-pro-name">{{ productInfo.jixing }}</span>
          <div class="right">
            <!-- <em class="u-jd"> 自营 </em> <span>{{ productInfo.shopname }}</span> -->
          </div>
        </div>
      </div>
      <div class="hr-20"></div>
      <div class="product w clearfix">
        <div class="left">
          <div class="product-gallery positionFixed">
            <div class="relative" id="imgcard">
              <el-carousel trigger="click" height="450px" :autoplay="false">
                <el-carousel-item
                  v-for="item in productInfo.imageList"
                  :key="item"
                >
                  <img :src="`https://img11.360buyimg.com/n7/${item}`" />
                </el-carousel-item>
              </el-carousel>
            </div>
          </div>
        </div>
        <div class="right relative clearfix">
          <div
            class="product-property clearfix relative"
            style="min-height: 462px; height: auto; padding-bottom: 104px"
          >
            <div id="product-property-recommand">
              <div class="product-meta product-global">
                <h1 id="pro-name">
                  {{ productInfo.skuname }}
                </h1>
              </div>
              <div class="detabs-content">
                <ul class="goods-shop-list" v-if="sortP.lenght != 0">
                  <li
                    class="goods-shop-item"
                    v-for="(item, index) in sortP"
                    :key="index"
                  >
                    <div class="merchant-logo fl">
                      <a href="javascript:;">
                        <img :src="item.logourl" ref />
                      </a>
                    </div>
                    <div class="merchant-goods-info cl">
                      <div class="pic fl">
                        <a href="javasript:;"><img :src="item.img" /></a>
                      </div>
                      <div class="title fl">
                        <strong>
                          {{
                            item.comment == -1 ? "不详" : item.comment
                          }}</strong
                        ><strong
                          style="color: darkgray"
                          v-if="item.comment != -1"
                          >人参与</strong
                        >
                      </div>
                      <div class="price fl">
                        <strong> ￥{{ item.price }}</strong>
                      </div>
                      <a class="gotobuy fr" :href="item.url" target="_blank"
                        >去购买</a
                      >
                    </div>
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="detail w" v-if="productInfo != ''">
        <product-info
          :product_info="productInfo.product_info"
          :imageAndVideo="productInfo.imageAndVideo"
          :ptable="productInfo.ptable"
          :comment="productInfo.comment"
          :commentcontent="productInfo.commentcontent"
          :brand="productInfo.brand"
          :packItems="productInfo.packItems"
        ></product-info>
      </div>
    </div>
  </div>
</template>

<script>
import ProductInfo from "./ProductInfo.vue";
export default {
  components: {
    ProductInfo,
  },
  data() {
    return {
      title: "",
      skuid: "",
      productInfo: "",
      price: 0,
      versions: [],
      isSelectVersion: [],
      preVersionIndex: -1,
      colors: [],
      isSelectColor: [],
      preColorIndex: -1,
      chooseColor: "0",
      chooseVersion: "0",
      colorversion: [],
      buynum: 1,
      sortP: [],
    };
  },
  methods: {
    CastComment(comment) {
      if (comment == "不详") {
        return 0;
      } else {
        comment = comment.split("+")[0];
        if (comment.indexOf("万")) {
          comment = comment.split("万")[0];
          comment = Number(comment) * 10000;
        }
      }

      return comment;
    },
    getDetailInfo() {
      this.axios
        .get("/phone/getOneProduct", {
          params: { skuid: this.$route.query.skuid },
        })
        .then((res) => {
          // console.log(res)
          this.isloading = !this.isloading;
          if (res.data.code == 200) {
            this.productInfo = res.data.data;
            for (let sp in res.data.sortP) {
              this.sortP.push(res.data.sortP[sp]);
            }
            this.sortP.sort((a, b) => {
              if (a.price == b.price) {
                let acomment = this.CastComment(a.comment);
                let bcomment = this.CastComment(b.comment);
                return bcomment - acomment;
              } else {
                return a.price - b.price;
              }
            });
            console.log(this.sortP);
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
  mounted() {
    // this.skuid = this.$route.query.skuid;

    this.getDetailInfo();
    document.documentElement.scrollTop = 0;
  },
};
</script>

<style scoped>
@import url("../../../assets/fa/css/all.css");
@import url("../../../assets/css/base.css");
@import url("../../../assets/css/detail.css");
</style>

<style>
#imgcard .el-carousel__container img {
  width: 100%;
  height: 100%;
}

#buynum .el-input-number {
  width: 89px;
}
</style>

